 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>网站反馈</title>
	 <link rel="stylesheet" href="css/分享.css">
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
	     <!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
     <style>
     html {
       box-sizing: border-box;
     }
     body{    
         font-family: 'Roboto Condensed', sans-serif;     
         
     }
     body {
       padding: 0;
       margin: 0;
       background-image: url(bg-01.jpg);
         background-size: cover;
         background-position: center;
         height: 85vh;
     }
     *,
     *:before,
     *:after {
       box-sizing: inherit;
       padding: 0;
       margin: 0;
     }
     /* _-_-_-_-__ morphing navigation styling __-_-_-_-_ */
     .header {
       width: 10px;
       height: 720px;   
       background-size: cover;
       position: absolute;
	   top:0px;
     }
     .navigation {
       width: 100px;
       height: 100%;
       display: block;
       padding-right: 40px;
       position: absolute;
       top: 0;
       left: 0;
       background: white;
       border-radius: 0% 50% 350% 0%;   
       perspective: 800;   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .logo {
       width: 70px;
       height: 70px;
       display: block;
       position: absolute;
       top: 8%;
       left: 15%; 
       cursor: pointer;  
       transform-style: preserve-3d;   
       transform: rotateY(-360deg);   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation__icon {
       width: 55px;
       height: 44px;
       display: block;
       position: relative;
       top: 22%;
       left: 35%;
       background: hsla(312, 51%, 41%, 0.0);
       cursor: pointer;  
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation__icon .topBar {
       width: 55px;
       height: 2px;
       display: block;
       background: #f7082d;
       position: absolute;
       top: 10px;   
       transform: rotate(0);   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation__icon .middleBar {
       width: 55px;
       height: 2px;
       display: block;
       background: #f7082d;
       position: absolute;
       top: 20px;   
       transform: rotate(0);
        transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation__icon .bottomBar {
       width: 35px;
       height: 2px;
       display: block;
       background: #f7082d;
       position: absolute;
       top: 30px;   
       transform: rotate(0);   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation .navigation__ul {
       float: right;
       margin-top: 220px;
       opacity: 0;
       visibility: hidden;  
       transform: rotateY(-90deg) translateX(-300px);   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation .navigation__ul li {
       list-style: none;
       text-align: right;
     }
     .navigation .navigation__ul a {
       display: block;
       font-size: 30px;
       font-weight: 800;
       text-transform: uppercase;
       text-decoration: none;
       color: black;
       margin-bottom: 15px;
     }
     .navigation .navigation__ul a:hover {
       color: hsl(185, 96%, 33%);
     }
     .navigation .navigation__social {
       width: 100%;
       height: 30px;
       padding-right: 45px;
       position: absolute;
       bottom: 18%;
     }
     .navigation .navigation__social-ul {
       float: right;
       list-style: none;
       white-space: nowrap;
       opacity: 0;
       visibility: hidden;   
       transform: rotateY(-90deg) translateX(-300px);   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation .navigation__social-ul li {
       display: inline-block;
       opacity: 0;
       visibility: hidden;   
       transform: translateY(35px);   
       transition: all 800ms cubic-bezier(.9, 0, .33, 1);
     }
     .navigation .social-icon {
       width: 30px;
       height: 30px;
       display: block;   
       margin-left: 15px;
     }
      
     .navigation-open {
       width: 350px;
       height: 100%;
       display: block;
       background: #FFF;
       position: absolute;
       left: 0;
       border-radius: 0% 1% 1% 0%;
     }
     .navigation-open .logo {
       left: 68%;   
       transform: rotateY(0);
     }
     .navigation-open .navigation__icon {
       left: 80%;
     }
     .navigation-open .navigation__ul {
       opacity: 1;
       visibility: visible;
     }
     .navigation-open .navigation__social-ul {
       opacity: 1;
       visibility: visible;
     }
     .navigation-open .topBar {
       top: 21px;   
       transform: rotate(45deg);
     }
     .navigation-open .middleBar {
       width: 0;
       top: 22px;
       opacity: 0;
       visibility: hidden; 
       transform: translateX(30px);
     }
     .navigation-open .bottomBar {
       width: 55px;
       top: 21px;   
       transform: rotate(-45deg);
     }
     .navigation-open .navigation__ul {   
       transform: rotateY(0) translateX(0);
     }
     .navigation-open .navigation__social-ul {   
       transform: rotateY(0) translateX(0);
     }
     .navigation-open .navigation__social-ul li {
       opacity: 1;
       visibility: visible;   
       transform: translateY(0px);
     }
     .navigation-open .navigation__social-ul li:nth-child(1) {   
       transition-delay: .5s;
     }
     .navigation-open .navigation__social-ul li:nth-child(2) {   
       transition-delay: .46s;
     }
     .navigation-open .navigation__social-ul li:nth-child(3) {   
       transition-delay: .43s;
     }
     .navigation-open .navigation__social-ul li:nth-child(4) {   
       transition-delay: .4s;
     }
     @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
 :root {
    
   
   --color-secondary: #f6d8d1;
   --color-white: white;
   --color-accent: #fcf5f3;
   --spacer: 1.25rem;
   --d: 2000ms;
   --d2: 600ms;
   --e: cubic-bezier(0.445, 0.05, 0.55, 0.95);
   --e2: cubic-bezier(0.23, 1, 0.32, 1);
}
 * {
   box-sizing: border-box;
}
 .body {
   background-image: url(images/xhcbg1.jpg);
     background-size: cover;
   display: grid;
   font-family: 'Roboto', sans-serif;
   height: 100vh;
   margin: 0;
   overflow: hidden;     
   padding: var(--spacer);
   place-items: center;
}
 .card {
   display: flex;
   flex-direction: column;
   max-width: 350px;
   overflow-y: hidden;
   padding: 0 var(--spacer);
   perspective: 1200px;
   position: relative;
   transform: translateY(30%);
   transition: transform var(--d2) var(--e2);
     margin-top: -30px !important;
}
 .card.is-active {
   animation: throw var(--d2) var(--e2) forwards;
     overflow: hidden;
}
 .card.is-closing {
   transform: translateY(0);
}
 .card-illustration {
   cursor: pointer;
   display: flex;
   justify-content: center;
   width: 100%;
   background-color: var(--color-accent);
   z-index: 2;
}
 
  
 .card-content {
   position: relative;
   transform: scaleY(0);
   transform-origin: 0 0;
   z-index: 1;
}
 .is-closing .card-content {
   animation: slide-up var(--d2) var(--e2) forwards;
   transform: scaleY(1);
}
 .is-active .card-content {
   animation: swing var(--d) calc(var(--d2) / 2) var(--e) forwards;
}
 .card-info {
   background-color: var(--color-white);
   padding: var(--spacer);
}
 .card-info > * + * {
   margin-top: var(--spacer);
}
 .card-name {
   font-size: 1.75rem;
   font-weight: bold;
     margin-bottom: 0;
}
 .card-title {
   display: inline-block;
   background-color:#0c8bbd;
   border-radius: 360px;
   color: var(--color-white);
   font-size: 0.75rem;
   letter-spacing: 0.025rem;
   padding: 0.5rem 1rem;
}
 .card-desc {
   font-size: 1rem;
   line-height: 1.4;
}
 .card-actions {
   display: flex;
   width: 100%;
}
 .btn {
   background-color: #0b3a5c;
   border: none;
   color: white;
   cursor: pointer;
   font-family: inherit;
   font-size: 0.75rem;
   letter-spacing: 0.05rem;
   margin: 0;
   outline: none;
   padding: var(--spacer);
   position: relative;
   text-transform: uppercase;
   transition: background-color var(--d2) var(--e2);
   transform-origin: 0 0;
}
 .btn-action {
   flex: 1;
}
 .btn-action:nth-child(2) {
   background-color: #0c8bbd;
}
 .is-active .btn-action {
   transform: scaleX(0);
}
 .is-active .btn-action:nth-child(1) {
   animation: swing calc(var(--d) * 1.25) calc(var(--d) / 4) var(--e) forwards;
}
 .is-active .btn-action:nth-child(2) {
   animation: swing calc(var(--d) * 1.5) calc(var(--d) / 3) var(--e) forwards;
}
 .btn-close {
   align-items: center;
   background-color: transparent;
   display: flex;
   justify-content: center;
   opacity: 0;
   position: absolute;
   padding: calc(var(--spacer) / 2);
   right: var(--spacer);
   top: 0.25rem;
   transition: opacity var(--d2) var(--d) var(--e2);
   visibility: hidden;
   z-index: 2;
}
 .is-active .btn-close {
   visibility: visible;
   opacity: 1;
}
 
 @keyframes throw {
   35% {
     transform: translateY(-10%) rotate(-2deg);
  }
   50% {
     transform: translateY(30%) rotate(10deg);
  }
   100% {
     transform: translateY(0);
  }
}
 @keyframes swing {
   0% {
     transform: rotateX(90deg);
  }
   15% {
     transform: rotateX(-70deg);
  }
   30% {
     transform: rotateX(50deg);
  }
   45% {
     transform: rotateX(-30deg);
  }
   60% {
     transform: rotateX(15deg);
  }
   75% {
     transform: rotateX(-10deg);
  }
   90% {
     transform: rotateX(5deg);
  }
   100% {
     transform: rotateX(0);
  }
}
 @keyframes slide-up {
   to {
     transform: translateY(-100%);
  }
}
         .fa{
             font-size: 30px;
             
         }
 .comment{
	 position: relative;
	 left:1000px;
	 top:-150px;
	 
 }
     
     </style>
 </head>
 <body>
	 <div class="body">
     <div class="card">
  <div class="card-illustration">
    <svg viewBox="0 0 100 100">
      <img src="images/fankui.png"width="310"height=150"" alt="">
    </svg>
    
    
    
  </div>
  <div class="card-content">
    <div class="card-info">
      <h2 class="card-name">反馈卡(左边是导航栏)</h2>
      <h3 class="card-title">老师真帅</h3>
      <p class="card-desc">感谢老师百忙之中查看本网站，弟子不才，为提高本网站的服务与质量，以便满足您的需要，希望您能给予本网站宝贵的意见和建议。如果老师还觉得不错，请多多加分支持*^O^*(左边是导航栏哦)</p>
    </div>
    <div class="card-actions">
      <button class="btn btn-action">好</button>
      <button class="btn btn-action">好的</button>
    </div>
  </div>
  <button class="btn btn-close">
    <svg viewBox="0 0 24 24">
       <i class="fa fa-close"></i>
    </svg>
  </button>
</div>
<div class="dy">
<div class="heart-btn">
      <div class="content">
        <span class="heart"></span>
        <span class="text">Like</span>
        <span class="numb"></span>
      </div>
    </div>
	</div>
	<!-- <script>
	      $(document).ready(function(){
	        $('.content').click(function(){
	          $('.content').toggleClass("heart-active")
	          $('.text').toggleClass("heart-active")
	          $('.numb').toggleClass("heart-active")
	          $('.heart').toggleClass("heart-active")
	        });
	      });
	    </script> -->
<script>
    const card = document.querySelector('.card');
const open = card.querySelector('.card-illustration');
const close = card.querySelector('.btn-close');
const content = card.querySelector('.card-content');
const illustration = card.querySelector('.card-illustration')
const cls = {
  active: 'is-active',
  closing: 'is-closing'
};
  
open.addEventListener('click', () => {
  card.classList.add(cls.active);
});
close.addEventListener('click', () => {
  card.classList.add(cls.closing);
  card.classList.remove(cls.active);
});
content.addEventListener('animationend', () => {
  card.classList.remove(cls.closing)
});
illustration.addEventListener('mousemove', function(e) {
  const r = this.getBoundingClientRect()
  this.style.setProperty('--x', e.clientX - (r.left + Math.floor(r.width / 2)))
  this.style.setProperty('--y', e.clientY - (r.top + Math.floor(r.height / 2))) 
});
illustration.addEventListener('mouseout', function() {
  this.style.setProperty('--x', 0)
  this.style.setProperty('--y', 0)
});
    
</script>
</div>
<header class="header">
  <nav class="navigation">
    <section class="logo"></section>
    <section class="navigation__icon">
      <span class="topBar"></span>
      <span class="middleBar"></span>
      <span class="bottomBar"></span>
    </section>
    <ul class="navigation__ul">
      <li><a href="index.html">首页</a></li>
      <li><a href="注册.html">注册|登录</a></li>
      <li><a href="郑州.html">郑州及其周边</a></li>
      <li><a href="美食.html">郑州美食</a></li>
      <li><a href="个人界面.html">关于我</a></li>
    </ul>
    <section class="navigation__social">
      <ul class="navigation__social-ul">
        <li>
          <a href="" class="social-icon"></a>
        </li>
        <li>
          <a href="" class="social-icon"></a>
        </li>
        <li>
          <a href="" class="social-icon"></a>
        </li>
        <li>
          <a href="" class="social-icon"></a>
        </li>
      </ul>
    </section>
  </nav>
</header>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
<!-- <script>
    
        
   
     $(function() {
   $(".navigation__icon").click(function() {
     $(".navigation").toggleClass('navigation-open');
   });
 });
  
    
        
   
    
    </script> -->
	<div class="bo">
	<div class="share-button">
	      <span><i class="fas fa-share-alt"></i> Share!</span>
	      <a href="https://baike.baidu.com/item/Facebook/7449587?fr=aladdin"><i class="fab fa-facebook-f"></i></a>
	      <a href="https://baike.baidu.com/item/Twitter/2443267?fromtitle=%E6%8E%A8%E7%89%B9&fromid=4596587&fr=aladdin"><i class="fab fa-twitter"></i></a>
	      <a href="https://www.linkedin.com/start/join?trk=brandpage_baidu_pc-mainlink"><i class="fab fa-instagram"></i></a>
	      <a href="https://baike.baidu.com/item/Instagram/8550544"><i class="fab fa-linkedin-in"></i></a>
	    </div>
		</div>
		<div class="comment">
		<form action="#"method="post">
			反馈：<br/>
			<textarea cols="60"rows="8">
		评论的时候注意遵纪守法哦~
			</textarea>
			<input type="submit"value="提交"/>
		</form>
		</div>
 </body>
 </html>